<template>
    <div class="search">
        <div class="header">
            <van-search
                    v-model="searchVal"
                    shape="round"
                    background="#4fc08d"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @input="onSearch"
            />
        </div>
        <div v-if="filterContent.length">
            <p v-for="(item,index) in filterContent" :key="index">
                <SearchLight :datas="item" :searchKey="searchVal"></SearchLight>
            </p>
        </div>
    </div>
</template>

<script>
    import SearchLight from '../components/searchHighlight'

    export default {
        name: "search",
        components: {SearchLight},
        data() {
            return {
                searchVal: '',
                searchData: [
                    {name: '12345'},
                    {name: '23456'},
                    {name: '34567'},
                    {name: '45678'},
                    {name: '67890'},

                ],
                filterContent: []
            }
        },
        methods: {
            onSearch(e) {
                if (!this.searchVal) return false;
                let filterContent = [];
                filterContent = this.searchData.filter((item) => (item.name.indexOf(this.searchVal) >= 0));
                filterContent.map(i => (i.key = this.searchVal));
                this.filterContent = filterContent
            }
        }
    }
</script>

<style scoped lang="scss">
    .search {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
</style>
